<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../../include/laypublic.jsp" %>
<%@ include file="../../include/vueComponent.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>历史审批信息</title>
</head>
<link rel="stylesheet" href="${ctx}/resources/vue-element-lib/detail.css">
<style>
    .approval {
        box-sizing: border-box;
        padding: 10px;
    }
</style>
<body>
<div id="app">
    <div class="layui-tab layui-tab-brief" lay-filter="xqxx-tab-all">
        <ul class="layui-tab-title">
            <li id="tbglId" class="layui-this" lay-id="0">立项详情</li>
            <li id="zgysId" lay-id="1">审批结果</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">
                <div class="container">
                    <el-form ref="formRef" :model="info" label-width="140px" label-suffix="："
                             label-position="left">
                        <%--项目基础信息--%>
                        <div class="base-info">
                            <div class="title">
                                <h3>项目基础信息</h3>
                            </div>
                            <!--表单-->
                            <div>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="项目名称">
                                            <span>{{info.proName}}</span>
                                        </el-form-item>
                                    </x-col>
                                    <x-col position="right">
                                        <el-form-item label="项目编码">
                                            <span>{{info.proCode}}</span>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="营销经理">
                                            <span>{{info.staffName}}</span>
                                        </el-form-item>
                                    </x-col>
                                    <x-col position="right">
                                        <el-form-item label="申请日期">
                                            <span>{{info.dates}}</span>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="所属公司">
                                            <span>{{info.compName}}</span>
                                        </el-form-item>
                                    </x-col>
                                    <x-col position="right">
                                        <el-form-item label="项目业态">
                                            <span>{{info.proFormat}}</span>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="项目地点">
                                            <span>{{info.sgCityName}}</span>
                                        </el-form-item>
                                    </x-col>
                                    <x-col position="right">
                                        <el-form-item label="一般公共预算收入">
                                            <span>{{info.pubIncome}}</span>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="入库情况">
                                            <x-select v-model="info.isInStore" :options="storageSituation" disabled
                                                      name="入库类型"></x-select>
                                        </el-form-item>
                                    </x-col>
                                    <x-col position="right">
                                        <el-form-item label="年度全部PPP项目已占一般公共预算支出比例" label-width="200px" disabled>
                                            <span>{{info.pppPercent}}</span>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="运营周期">
                                            <x-input v-model="info.omYears" name="运营周期" disabled/>
                                        </el-form-item>
                                    </x-col>
                                    <x-col position="right">
                                        <el-form-item label="建设周期">
                                            <x-input v-model="info.buildYears" name="建设周期" disabled></x-input>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="合作周期">
                                            <x-input v-model="info.workYears" name="合作周期" disabled></x-input>
                                        </el-form-item>
                                    </x-col>

                                    <x-col position="right">
                                        <el-form-item label="总投资额">
                                            <x-input v-model="info.sumAmount" name="总投资额" disabled></x-input>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="项目渠道">
                                            <x-select v-model="info.fromChannel" :options="projectChannel" disabled
                                                      name="项目渠道"></x-select>
                                        </el-form-item>
                                    </x-col>
                                    <x-col position="right">
                                        <el-form-item label="政府评审阶段">
                                            <x-input v-model="info.govAccess" name="政府评审阶段" disabled></x-input>
                                        </el-form-item>
                                    </x-col>

                                </el-row>
                                <el-row>
                                    <x-col position="full">
                                        <el-form-item label="项目简介">
                                            <x-input v-model="info.proRemarks" name="项目简介" type="textarea" disabled
                                                     :rows="4"></x-input>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                            </div>
                        </div>
                        <%--项目合作方--%>
                        <div class="title">
                            <h3>项目合作方</h3>
                        </div>
                        <div class="unit">
                            <div class="unit_center">
                                <el-table :data="summaryCoops" style="width: 100%" border>
                                    <el-table-column label="合作单位" align="center">
                                        <template slot-scope="scope">
                                            <el-select v-model="scope.row.sgCoopId" filterable placeholder="请选择"
                                                       disabled>
                                                <el-option v-for="item in coopInfoList" :key="item.id"
                                                           :label="item.coopName"
                                                           :value="item.id"></el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="单位作用" align="center">
                                        <template slot-scope="scope">
                                            <el-select v-model="scope.row.coopEffect" placeholder="请选择" disabled>
                                                <el-option v-for="item in unitRole" :key="item.code" :label="item.name"
                                                           :value="item.code"></el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="合作类型" align="center">
                                        <template slot-scope="scope">
                                            <el-select v-model="scope.row.cooperationType" placeholder="请选择" disabled>
                                                <el-option v-for="item in cooperationType" :key="item.code"
                                                           :label="item.name"
                                                           :value="item.code"></el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="title">
                            <h3>项目投资构成</h3>
                        </div>
                        <div class="investment">
                            <div class="investment_center">
                                <el-table :data="investmentData" style="width: 100%" border ref="investment">
                                    <el-table-column prop="name" label="名称" align="center">
                                        <template slot-scope="scope">
                                            {{scope.row.name}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" v-for="(item,index) in itemName "
                                                     :key="index">
                                        <template #header>
                                            <el-input v-model="item.name" placeholder="请输入子项"></el-input>
                                        </template>
                                        <template slot-scope="scope">
                                            {{scope.row.list[index]}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="type" label="合计" align="center" type="index" width="100">
                                        <template slot-scope="scope">
                                            <div v-if="scope.$index<=2"></div>
                                            <div v-else>{{scope.row.total?scope.row.total:'0'}}</div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <%--回报机制--%>
                        <div class="repay">
                            <div class="title">
                                <h3>回报机制</h3>
                            </div>
                            <el-row>
                                <x-col position="full">
                                    <el-form-item>
                                        <el-radio-group v-model="info.backMech" disabled>
                                            <el-radio label="1">政府付费</el-radio>
                                            <el-radio label="2">可行性缺口补助</el-radio>
                                            <el-radio label="3">使用者付费</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </x-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6" :offset="2" class="mr-10">
                                    <el-form-item label="工程费用下浮率">
                                        <x-input size="small" type="number" min="0" v-model="info.downRate" disabled/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" class="mr-10">
                                    <el-form-item label="合理利润率">
                                        <x-input size="small" type="number" min="0" v-model="info.profitRate" disabled/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" class="mr-10">
                                    <el-form-item label="投资回报率">
                                        <x-input size="small" type="number" min="0" v-model="info.investBackRate"
                                                 disabled/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6" :offset="2" class="mr-10">
                                    <el-form-item label="折现率">
                                        <x-input size="small" type="number" min="0" v-model="info.discountRate" disabled/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" class="mr-10">
                                    <el-form-item label="建设期融资利率">
                                        <x-input size="small" type="number" min="0" v-model="info.finRate" disabled/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" class="mr-10">
                                    <el-form-item label="融资回报率">
                                        <x-input size="small" type="number" min="0" v-model="info.finBackRate" disabled/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6" :offset="2" class="mr-10">
                                    <el-form-item label="资本金回报率">
                                        <x-input size="small" type="number" min="0" v-model="info.capitalBackRate" disabled/>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="6" class="mr-10">
                                    <el-form-item label="资本金比例">
                                        <x-input size="small" type="number" min="0" v-model="info.capitalPercent" disabled/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" >
                                    <el-form-item label="资本金数额">
                                        <x-input size="small" type="number" min="0" v-model="info.capitalFund" disabled/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>

                                <el-col :span="6" :offset="2" class="mr-10">
                                    <el-form-item label="我方股权出资金额">
                                        <x-input size="small" type="number" min="0" v-model="info.stockFund" disabled/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" class="mr-10">
                                    <el-form-item label="我方股权比例">
                                        <x-input size="small" type="number" min="0" v-model="info.stockPercent" disabled/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="title">
                            <h3>项目风险信息</h3>
                        </div>
                        <div class="unit">
                            <div class="unit_center">
                                <el-table :data="riskTable" style="width: 100%" border>
                                    <el-table-column prop="unit" label="风险描述" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.riskDesc" placeholder="请输入风险点" disabled></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="effect" label="风险等级" align="center">
                                        <template slot-scope="scope">
                                            <el-select v-model="scope.row.riskLevel" placeholder="请选择" disabled>
                                                <el-option v-for="item in riskLevel" :key="item.code" :label="item.name"
                                                           :value="item.code"></el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="type" label="处理策略" align="center">
                                        <template slot-scope="scope">
                                            <el-select v-model="scope.row.solveWay" placeholder="请选择" disabled>
                                                <el-option v-for="item in riskSolveWay" :key="item.code"
                                                           :label="item.name"
                                                           :value="item.code"></el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="type" label="状态" align="center">
                                        <template slot-scope="scope">
                                            <el-select v-model="scope.row.status" placeholder="请选择" disabled>
                                                <el-option v-for="item in riskStatus" :key="item.code"
                                                           :label="item.name"
                                                           :value="item.code"></el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="type" label="最新进展" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.latestProgress" disabled
                                                      placeholder="请描述风险进展"></el-input>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="title">
                            <h3>底线标准情况</h3>
                        </div>
                        <div class="unit">
                            <div class="unit_center">
                                <el-table :data="standardTable" style="width: 100%" border>
                                    <el-table-column prop="nowName" label="标准名称"
                                                     align="center"></el-table-column>
                                    <el-table-column prop="nowProgress" label="标准值"
                                                     align="center"></el-table-column>
                                    <el-table-column prop="nowProgress" label="当前进度"
                                                     align="center"></el-table-column>
                                    <el-table-column prop="resultMsg" label="结论" align="center"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="title">
                            <h3>立项策划信息</h3>
                        </div>
                        <el-row>
                            <x-col position="full">
                                <el-form-item label="优化方案">
                                    <x-input v-model="plotInfo.optRemark" type="textarea" :rows="4" disabled></x-input>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <div class="unit" style="padding-top: 10px">
                            <div class="unit_center">
                                <el-table :data="plotInfo.plotTableDatas" style="width: 100%" border>
                                    <el-table-column prop="effect" label="测算边界" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.csBound" placeholder="请输入测算边界" disabled></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="type" label="目前指标" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.nowIndex" placeholder="请输入目前指标" disabled></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="type" label="优化情况" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.optimization" placeholder="请描述优化情况" disabled></el-input>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <el-row>
                            <x-col position="full">
                                <el-form-item label="初步测算结果">
                                    <x-input v-model="plotInfo.csResult" type="textarea" :rows="4" disabled></x-input>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <div class="title">
                            <h3>项目附件信息</h3>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width:350px;">支持pdf、excel、word、图片资料，可上传多个</label>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">立项报告</label>
                            <div class="layui-input-block">
                                <div class="layui-upload">
                                    <div class="layui-upload-list" id="4-upload-more-list">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">营销策划书（选填）</label>
                            <div class="layui-input-block">
                                <div class="layui-upload">
                                    <div class="layui-upload-list" id="5-upload-more-list">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">项目物有所值评估</label>
                            <div class="layui-input-block">
                                <div class="layui-upload">
                                    <div class="layui-upload-list" id="6-upload-more-list">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">项目财政承受可行性评估</label>
                            <div class="layui-input-block">
                                <div class="layui-upload">
                                    <div class="layui-upload-list" id="7-upload-more-list">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">项目实施方案</label>
                            <div class="layui-input-block">
                                <div class="layui-upload">
                                    <div class="layui-upload-list" id="8-upload-more-list">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-form>
                </div>
            </div>
            <div class="layui-tab-item">
                <%@ include file="lay-processHistory-detail.jsp" %>
            </div>
        </div>
    </div>
</div>
<script src="${ctx}/resources/vue-element-lib/jquery.js"></script>
<script>
    var fileArr = [];
    var staticPath = '${fileHttpPre}';
    layui.config({
        base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'set', 'upload', 'table', 'transfer', 'laydate', 'element', 'layer'], function () {
        var $ = layui.$
            , upload = layui.upload
            , table = layui.table
            , element = layui.element
            , layer = layui.layer;
    });

    /*核心*/
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                layId: '0',
                procNodeList: [],
                tempNodeList: [],
                auditMsg: '',//审批意见
                id: '',
                name: '',
                options: [],
                info: {
                    proName: '',//项目名称
                    proCode: '',//项目编码
                    staffName: '',//营销经理
                    date: '',//当前日期
                    compName: '',//所属公司
                    proFormat: '',//项目业态
                    sgCityName: '',//项目地点
                    pubIncome: '',//一般公共预算收入
                    isInStore: '',//入库情况
                    pppPercent: '',//年度全部PPP项目已占一般公共预算支出比例
                    omYears: '',//运营周期
                    buildYears: '',//建设周期
                    workYears: '',//合作周期
                    sumAmount: '',//总投资额
                    fromChannel: '',//项目渠道
                    govAccess: '',//政府评审阶段
                    proRemarks: '',//项目简介
                    //回报机制
                    downRate: '',//工程费用下浮率
                    profitRate: '',//合理利润率
                    investBackRate: '',//投资回报率
                    discountRate: '',//折现率
                    finRate: '',//建设期融资利率
                    finBackRate: '',//融资回报率
                    capitalBackRate: '',//资本金回报率
                    capitalPercent: '',//资本金比例
                    capitalFund: '',//资本金数额
                    stockFund: '',//我方股权出资金额
                    stockPercent: '',//我方股权比例
                    //项目风险
                    proMerit: '',//项目优点
                    proOthers: '',//其他说明

                    backMech: '',//回报机制复选框
                },
                //项目类型
                projectType: [{value: '1', label: 'PPP项目'}, {value: '2', label: 'ETC项目'},],
                //入库情况
                storageSituation: [],
                unitRole: [],//单位作用
                //项目业态
                projectFormat: [{value: '1', label: '生态建设和环境保护'}, {value: '2', label: '城镇综合开发'},
                    {value: '3', label: '教育'}, {value: '4', label: '水利建设'}, {value: '5', label: '医疗卫生'},
                    {value: '6', label: '政府基础设施'}, {value: '7', label: '其他'}],
                projectChannel: [],//项目渠道
                cooperationType: [],//合作类型
                coopInfoList: [],//合作单位
                //业主单位
                ownerUnit: [{value: '1', label: '业主单位1'}, {value: '2', label: '业主单位2'},],
                // 是否追踪
                traceOptions: [
                    {label: '继续跟踪', value: 1},
                    {label: '停止跟踪', value: 2}
                ],
                summaryCoops: [],// sgCoopId 合作单位 coopEffect 单位作用  cooperationType 类型   合作单位
                itemName: [{name: '子项名称1'},],
                investmentData: [],
                riskTable: [],   //项目风险点 riskDesc:风险描述 riskLevel:等级 solveWay:处理策略 latestProgress:最新进展
                riskLevel: [],//风险等级列表
                standardTable: [],//底线标准情况 name:标准名称 value:标准值 schedule:当前进度  conclusion:结论
                plotInfo: {//立项策划信息  optRemark  优化方案 csResult 测算结果 plotTableDatas 测算边界表格
                    optRemark: '',
                    csResult: '',
                    plotTableDatas: [],// csBound 测算边界  nowIndex 目前指标 optimization 优化情况
                },
                //是否满足底线标准，baseLineFlag，0-不满足，1-满足
            }
        },
        created() {
            this.processId = "${processId}"
            this.queryProcessList();
        },
        mounted() {

        },
        methods: {
            queryProcessList() {
                let that = this;
                $.ajax({
                    type: 'post',
                    url: basePath + '/historyProcess/proNodeDetail',  //请求数据接口
                    data: {processId: that.processId},
                    success: function (result) {
                        if (result.entity) {
                            that.procNodeList = result.entity.procNodeList;
                            that.tempNodeList = result.entity.tempNodeList;
                            that.info = result.entity.detailJson.info;
                            that.unitRole = result.entity.detailJson.proFormaType;
                            that.cooperationType = result.entity.detailJson.cooperationType;
                            that.coopInfoList = result.entity.detailJson.coopInfoList;
                            that.investmentData = result.entity.detailJson.investmentInfoVos;
                            that.riskTable = result.entity.detailJson.riskTable;
                            that.summaryCoops = result.entity.detailJson.summaryCoops;
                            that.plotInfo = result.entity.detailJson.plotInfo;
                            that.itemName = result.entity.detailJson.itemName;
                            that.riskSolveWay = result.entity.detailJson.riskSolveWay;
                            that.projectChannel = result.entity.detailJson.projectChannel;
                            that.riskLevel = result.entity.detailJson.riskLevel;
                            that.isInStore = result.entity.detailJson.isInStore;
                            that.storageSituation = result.entity.detailJson.storageSituation;
                            that.riskStatus = result.entity.detailJson.riskStatus;
                            that.standardTable = result.entity.detailJson.standardTable || [];//底线标准情况
                            if (fileArr.length == 0) {
                                that.showFile(result.entity.detailJson.fileAtt);
                            }
                        }
                    }
                });
            },
            //展示文件
            showFile(fileList) {
                if (fileList.length > 0) {
                    fileArr = fileList;
                    for (let i in fileList) {
                        let contractInfo = fileList[i];
                        let arr = contractInfo.split("|");
                        let imgSrc = "";
                        let suffix = arr[1].substring(arr[1].lastIndexOf(".") + 1, arr[1].length);
                        if (suffix == 'jpg' || suffix == 'png') {
                            imgSrc = "${fileHttpPre}/" + arr[3];
                        } else {
                            imgSrc = "${ctx}/resources/images/" + suffix + ".jpg";
                        }
                        $('#' + arr[0] + '-upload-more-list')
                            .append('<div class="layui-upload-img-div" id="upload_img_' + arr[2] + '"><img src="' + imgSrc + '" title="'
                                + arr[1] + '" class="layui-upload-img"><div class="mask"><a href="javascript:void(0)" onclick="showImg(\'' + "${fileHttpPre}"
                                + arr[3] + '\');">查看</a><a href="javascript:void(0)" onclick="del(\''
                                + arr[2] + '\')";>删除</a></div><p>' + arr[1] + '</p><input type="hidden" value="'
                                + contractInfo + '" id="fileAtt_' + arr[2] + '" name="fileAtts" ></input></div> ');
                    }
                }
            },
        }
    });
</script>
</body>
</html>